<template>
  <div class="app">
    <h1 ref="title">我是App组件，我在{{name}}学习前端</h1>
    <button ref="btn" @click="show">点我输出title中的文字</button>
    <hr>
    <Person ref="ren"/>
    <hr>
    <School/>
  </div>
</template>

<script>
  import Person from './components/Person'
  import School from './components/School'

  export default {
    name:'App',
    components:{Person,School},
    data() {
      return {
        name:'尚硅谷'
      }
    },
    methods:{
      show(){
        console.log(this.$refs.title.innerText)
        console.log(this.$refs.ren.personName)
      }
    }
  }
  
</script>

<style>
  .app {
    background-image: linear-gradient(45deg,red,yellow,green);
    padding: 20px;
  }
</style>